<!-- src/components/SidebarMenu.vue -->
<template>
  <el-menu
      :default-active="defaultActive"
      text-color="#087aee"
      active-text-color="#f6043b"
      class="el-menu-vertical-demo"
      :router="true"
  >
    <menu-item
        v-for="route in menuList"
        :key="route.path"
        :item="route"
        :base-path="route.path.startsWith('/') ? route.path : '/' + route.path"
    />
  </el-menu>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import MenuItem from './MenuItem.vue';

const router = useRouter();

// ✅ 动态获取当前路径
const defaultActive = computed(() => router.currentRoute.value.path);

// ✅ 使用 router.getRoutes() 获取所有注册的路由
const menuList = computed(() => {
  return router.getRoutes()
      .filter(route => {
        // 只保留顶层菜单（/xxx 格式，且不是通配符）
        return !route.meta?.hidden &&
            route.path.match(/^\/[^/]+$/) && // 匹配 /xxx 一级路径
            route.path !== '/:pathMatch(.*)*';
      });
});
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 203px;
  margin-right: 3px;
  height: 100%;
}
</style>
